<template>
<!-- 新增/编辑教室弹框 -->
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="close" :close-on-click-modal="false" width="60%">
    <el-form inline :rules="roomRules" :model="roomForm" ref="roomRef">
      <el-form-item label="楼名:" prop="tower" >
         <el-input v-model="roomForm.tower" placeholder="请输入楼名" maxlength = 10></el-input>
      </el-form-item>
      <el-form-item label="楼层:" prop="storey">
         <el-select v-model="roomForm.storey" placeholder="请选择楼层">
            <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="教室号:" prop="room" >
         <el-input v-model.number="roomForm.room" placeholder="请输入教室号" maxlength = 5></el-input>
      </el-form-item>
      <el-form-item label="状态:" prop="status" v-if="this.curId && roomForm.status!==1">
         <el-select v-model="roomForm.status" placeholder="请选择状态">
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分配座位后可更改状态" v-if="roomForm.status===1">
      </el-form-item>
      <el-form-item label="备注:" prop="introduce" class="item100">
          <el-input type="textarea" v-model="roomForm.introduce" :autosize="{minRows: 3}" 
          maxlength="150" placeholder="请填写备注" show-word-limit class="introduce"></el-input>
       </el-form-item>      
    </el-form>
     <span slot="footer" class="dialog-footer">
        <el-button @click="close()" :loading="buttonLoading">取 消</el-button>
        <el-button v-if="this.curId" type="primary" @click="edit()" :loading="buttonLoading">确 定</el-button>
        <el-button v-else type="primary" @click="add()" :loading="buttonLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
 data() {
    return {
      dialogVisible: false,
      buttonLoading: false,
      loading: false,
      title: "新增教室",
      options:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
      statusOptions: [{
          value: 2,
          label: '可用'
        }, {
          value: 3,
          label: '清理'
        }, {
          value: 4,
          label: '维修'
        }, {
          value: 5,
          label: '占用'
        }],
      roomForm:{
        tower:'',
        storey:'',
        room:'',
        roomName:'',
        introduce:'',
        status:1
      },
      roomRules: {
        tower: [{ required: true, message: "请输入楼名", trigger: "blur" }],
        storey: [{ required: true, message: "请选择楼层", trigger: "blur" }],
        room: [{ required: true, message: "请输入教室号", trigger: "blur"},
                { type: 'number', message: '教室号必须为数字值'}],
        status: [{ required: true, message: "请选择状态", trigger: "blur" }],
      }
    };
  },
  props:{
    curId: {},
  },
  watch:{
    //监听curId判断是编辑还是新增
    dialogVisible(val){
      if(val){
        console.log(this.curId,333333)
        if (this.curId) {
          this.getDetail(this.curId);
        }
      }
    }
  },
  methods:{
    //打开
    open() {
      this.dialogVisible = true;
    },
    //关闭
    close() {
      this.dialogVisible = false;
      this.$refs.roomRef.resetFields();
      this.roomForm = {}
      this.title = "新增教室"
    },
    //新增
    add() {
      this.$refs.roomRef.validate( async valid => {
        if (!valid) return 
        this.buttonLoading = true;
        this.roomForm.roomName = `${this.roomForm.tower}-${this.roomForm.storey}层-${this.roomForm.room}`
        await this.$http.post("rooms/addRoom",this.roomForm)
        .then((res) => {
          console.log(res)
          if(res.status === 200){
            this.close();
            this.$message.success("新增教室成功!");
            this.$emit("getListData");
          }     
          this.buttonLoading = false;
        })
        .catch((err) => { 
          this.buttonLoading = false;
          this.$message.error("新增教室失败")
        });
      });
    },
    //详情
    getDetail(_id){
      console.log(_id,77)
      this.loading = true;
      this.$http.get("rooms/detail/" + _id)
        .then((res) => {
          console.log(res,456)
          if(res.status === 200){
            this.roomForm = res.data.data
            this.loading = false;
            this.title = "编辑教室";
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("获取教室失败！")
        })
    },
    //编辑
    edit(_id) {
      this.$refs.roomRef.validate( async valid => {
        if (valid)
        _id = this.curId
        console.log(_id,this.curId,222222222)
        this.roomForm.roomName = `${this.roomForm.tower}-${this.roomForm.storey}层-${this.roomForm.room}`
        this.buttonLoading = true;
        console.log(this.roomForm,555555)
        //return
        await this.$http.post("rooms/updateRoom/" + _id, this.roomForm)
        .then((res) => {
          console.log(res)
          if(res.status === 200){
            this.close();
            this.$message.success("编辑教室成功!");
            this.$emit("getListData");
          }     
          this.buttonLoading = false;
        })
        .catch((err) => { 
          this.buttonLoading = false;
          this.$message.error("编辑教室失败！")
        });
      });
    },

  },
};
</script>

<style lang="scss" scoped>
.item100{
  width: 100%;
  .introduce{
    float: left;
    width: 250%;
  }
}
</style>